<template>
  <div class="edit_profile">
    <my_header title="编辑个人信息">
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #right>
        <van-icon
          @click="$router.push({ name: 'index' })"
          name="wap-home-o"
          style="font-size: 20px"
        />
      </template>
    </my_header>
    <div class="box">
      <img :src="userList.head_img" alt="" />
      <van-uploader :after-read="afterRead" />
    </div>
    <div class="content">
      <!-- 修改昵称 -->
      <my_cell
        @click.native="nickShow = !nickShow"
        title="昵称"
        :desc="userList.nickname"
      ></my_cell>
      <van-dialog
        @confirm="updateNickname"
        v-model="nickShow"
        title="编辑昵称"
        show-cancel-button
      >
        <van-field
          v-model.trim="name"
          required
          label="用户名"
          placeholder="请输入用户名"
        />
      </van-dialog>

      <!-- 修改密码 -->
      <my_cell
        @click.native="pwdShow = !pwdShow"
        title="密码"
        desc="********"
      ></my_cell>
      <van-dialog
        :beforeClose="beforeClose"
        @confirm="updatePwd"
        v-model.trim="pwdShow"
        title="修改密码"
        show-cancel-button
      >
        <van-field
          v-model.trim="oldPwd"
          required
          label="原密码"
          placeholder="请输入原密码"
        />
        <van-field
          v-model.trim="newPwd"
          required
          label="新密码"
          placeholder="请输入新密码"
        />
      </van-dialog>

      <!-- 修改性别 -->
      <my_cell
        @click.native="gendershow = !gendershow"
        title="性别"
        :desc="userList.gender"
      >
      </my_cell>
      <van-action-sheet
        :close-on-click-action="true"
        v-model="gendershow"
        :actions="actions"
        @select="onSelect"
      />
    </div>
  </div>
</template>
// 实现用户头像的编辑
// 点击选择头像，渲染到页面
// 调用接口，修改用户信息

// 点击昵称一栏，弹出输入框
// 渲染用户昵称
// 修改用户昵称，点击确认时，修改用户信息，渲染用户昵称
<script>
import my_cell from "@/components/my_cell";
import my_header from "@/components/my_header";
import { postFile, getUserInfo, updateUserInfo } from "@/apis/user";
import axios from "@/utils/request";
export default {
  components: {
    my_header,
    my_cell,
  },
  data() {
    return {
      userList: {}, //用户信息
      id: "", // 用户id
      nickShow: false, // 昵称输入框的显示与隐藏
      name: "", // 用户昵称输入框的值
      pwdShow: false, // 用户密码
      oldPwd: "", // 原密码
      newPwd: "", // 新密码
      gendershow: false, // 性别
      actions: [{ name: "男" }, { name: "女" }],
    };
  },
  async mounted() {
    this.id = this.$route.params.id;
    let res = await getUserInfo(this.id).catch(() => {});
    this.userList = res.data.data;
    // 获取头像，拼接基准路径
    this.userList.head_img = axios.defaults.baseURL + this.userList.head_img;
    // console.log(this.userList);
    this.name = this.userList.nickname;
  },
  methods: {
    // 上传文件，更新头像
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let fd = new FormData();
      fd.append("file", file.file);
      // 文件上传
      let res = await postFile(fd).catch(() => {});
      // console.log(res);
      if (res.data.message == "文件上传成功") {
        this.$toast.success("头像更新成功");
        // 渲染头像
        this.userList.head_img = axios.defaults.baseURL + res.data.data.url;
        // 更新用户信息
        await updateUserInfo(this.id, {
          head_img: res.data.data.url,
        }).catch(() => {});
      }
    },

    // 修改昵称
    async updateNickname() {
      // 调用接口，修改用户信息
      let res = await updateUserInfo(this.id, {
        nickname: this.name,
      }).catch(() => {});
      this.$toast.success(res.data.message);
      // 将当前输入的值赋值进行页面的渲染
      this.userList.nickname = this.name;
    },

    // 修改密码
    async updatePwd() {
      // 点击确定按钮时，判断原密码是否正确，正确则执行下一步，不正确则返回并提示
      if (this.oldPwd !== this.userList.password) {
        return this.$toast.fail("原密码输入错误，请重新输入！");
      } else {
        // 原密码输入正确时的操作
        // 判断新密码是否输入
        if (this.newPwd.length <= 0) {
          return this.$toast.fail("请输入新密码！");
        }
        // 判断新密码是否复合要求 ：3-16位
        if (!/^.{3,16}$/.test(this.newPwd)) {
          return this.$toast.fail("请输入3~16位的新密码！");
        }
        // 新密码符合要求，调用方法发请求
        let res = await updateUserInfo(this.id, {
          password: this.newPwd,
        }).catch(() => {});
        // console.log(res);
        this.userList.password = this.newPwd;
        this.oldPwd = "";
        this.newPwd = "";
        this.$toast.success(res.data.message);
      }
    },

    // 修改密码错误时不关闭弹窗
    beforeClose(action, done) {
      if (action == "confirm") {
        if (
          this.oldPwd == this.userList.password &&
          /^.{3,16}$/.test(this.newPwd)
        ) {
          done();
        } else {
          done(false);
        }
      } else {
        done();
      }
    },

    // 修改性别
    async onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      let res = await updateUserInfo(this.id, { gender: item.name });
      this.userList.gender = item.name;
      this.$toast(res.data.message);
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: relative;
  // background-color: rgba(28, 238, 238, 0.616);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  img {
    width: 90px;
    height: 90px;
    display: block;
    // background-color: rgba(255, 238, 0, 0.534);
  }
  /deep/.van-uploader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /deep/ .van-uploader__upload {
    width: 90px;
    height: 90px;
    margin: 0;
    opacity: 0;
  }
}
</style>